<template>
    <div class="system-config">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>系统配置</span>
                </div>
            </template>

            <el-form :model="configForm" label-width="120px">
                <el-form-item label="系统名称">
                    <el-input v-model="configForm.systemName" />
                </el-form-item>

                <el-form-item label="系统描述">
                    <el-input v-model="configForm.systemDesc" type="textarea" rows="3" />
                </el-form-item>

                <el-form-item label="邮件配置">
                    <el-switch v-model="configForm.emailEnabled" />
                </el-form-item>

                <el-form-item label="短信配置">
                    <el-switch v-model="configForm.smsEnabled" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="saveConfig">保存配置</el-button>
                    <el-button @click="resetConfig">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'

const configForm = reactive({
    systemName: '后台管理系统',
    systemDesc: '基于Vue3和Flask的现代化管理系统',
    emailEnabled: true,
    smsEnabled: false
})

const saveConfig = () => {
    ElMessage.success('配置保存成功')
}

const resetConfig = () => {
    configForm.systemName = '后台管理系统'
    configForm.systemDesc = '基于Vue3和Flask的现代化管理系统'
    configForm.emailEnabled = true
    configForm.smsEnabled = false
    ElMessage.info('配置已重置')
}
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>